<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 200px;
        height: 200px;
        background-color: #bfa;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: orange;

        position: relative;
        top: -200px;
        left: 100px;

        /* margin-left: 200px;
            margin-top: -200px; */

        /* 定位（position）
                - 定位是一种更加高级的布局手段
                - 通过定位可以将元素摆放到页面任意位置
                - 使用position属性来设置定位
                    可选值：
                        static 默认值：元素是静止的没有开启定位
                        relative 开启元素的相对定位
                        absolute 开启元素的绝对定位
                        fixed   开启元素的固定定位
                        sticky 开启元素的粘滞定位



                -相对定位
                    -当元素的position属性值设置为relative时则开启了元素的相对定位
                    - 相对定位的特点：
                        1.元素开启相对定位以后，如果不设置偏移量元素，就不会发生任何的变化
                        2.参照于元素在文档流中的位置移动的
                        3.相对定位会提升元素的层级
                        4.相对定位不会使元素脱离文档流
                        5.相对定位不会改变元素的性质，快还是块
                - 偏移量（offset）
                    - 当元素开启了定位以后，可以通过偏移量来设置元素的位置
                        top 
                            -定位元素和定位位置上边的距离
                        bottom
                            - 定位元素和定位位置下边的距离
                                通常情况只用其中一个
                            - top越大，定位元素越向下移动

                        left
                            - 
                        right
                            水平方向，与上面类似
             */
      }
      .box3 {
        width: 200px;
        height: 200px;
        background-color: rgb(112, 112, 95);
        /* 
            margin-top: 200px; */
      }
    </style>
  </head>
  <body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
  </body>
</html>
